<template>
	<view class="body text-noraml">
        
		 <!-- v-if="payInfo" -->
		<view class="pay">
            <view class="u-font-28">微信支付</view>
			<text class="u-font-40">
                ￥<text class="num">{{money}}</text>
            </text>
		</view>
		<!-- info.data.balance > 0有余额 -->
		<view class="item">
            <view class="info-b">当前余额{{info.data.balance}}</view>
			<view class="u-flex u-row-between u-p-t-20 u-p-b-5" @click="choose">
				<view class="right u-flex u-row-between">
					<image class="pay-icon" src="../../static/icon/yu.png"></image>
					<text class="u-font-28 text-bold">余额支付</text>
				</view>
				<image class="index-icon-30" :src="check ? '/static/icon/choose_01.png' : '/static/icon/choose_02.png'"></image>
			</view>
            <!-- <view class="info-c">可低现金{{ (balance / 100).toFixed(2) }}元</view> -->
		</view>
        
		<view class="btn u-font-34" @click="$noMultipleClicks(pay)">确认支付</view>
	</view>
</template>

<script>
    // import { IMAGEURL } from '../../static/js/common';
	export default {
		data() {
			return {
                show: false,
                // IMAGEURL,
                noClick:true,//连点
				id: "",
				money: '',
				payInfo: '',
				
                check: false,
				payType: '', //是否使用金币 1-不使用 2-使用
				info: {},
                total: '',
			};
		},
		onLoad(option) {
            if (option.id) {
                this.id = option.id
                this.money = option.money
            }
			// this.getInfo()
		},
		methods: {
            
            // 选择使用金币
            choose() {
                this.check = !this.check;
                // if (this.check) {
                //     let balance = Number(this.info.data.balance)
                //     if (balance >= balancePay) {
                //         this.money = (this.money - (balancePay / 100)).toFixed(2)
                //     } else {
                //         this.money = (this.money - (balance / 100)).toFixed(2)
                //     }
                // } else {
                //     this.money = this.total
                // }
            },
            getInfo(){
            	this.$ajax('mine_info', {
            		userToken: this.$getSync('userToken'),
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.info = ret.data;
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
			
			pay() {
				var that = this,
                    payType = '';
                if (that.check) {
                    payType = 2
                } else {
                    payType = 1
                }
				that.$ajax('repay', {
					userToken: that.$getSync('userToken'),
					id: that.id,
					pay_type: payType, //是否使用金币 1-不使用 2-使用
				}).then(ret => {
					uni.hideLoading()
					if (ret.status == 0) {
						that.payInfo = ret.data.wxpay
						console.log(that.payInfo)
                        if (ret.data.wxpay) {
                            uni.requestPayment({
                            	provider: 'wxpay',
                            	timeStamp: that.payInfo.timeStamp,
                            	nonceStr: that.payInfo.nonceStr,
                            	package: that.payInfo.package,
                            	signType: 'MD5',
                            	paySign: that.payInfo.paySign,
                            	success: function(res) {
                                    uni.removeStorageSync('shopId') //购物id
                                    that.shareShow = true;
                            	},
                            	fail: function(err) {
                                    that.$toast('支付失败！');
                                    that.$ajax('fail', {
                                    	userToken: that.$getSync('userToken'),
                                        id: that.id,
                                    }).then(ret => {
                                    	if (ret.status == 0) {
                                    		
                                    	} else {
                                    		that.$toast(ret.message);
                                    	}
                                    });
                            	}
                            })
                        } else {
                            uni.removeStorageSync('shopId') //购物id
                            that.shareShow = true;
                        }
					} else {
						that.$toast(ret.message);
					}
				});
			},
            
		}
	};
</script>

<style lang="scss">
    .info-b{
        font-size: 28rpx;
        color: #f62a2a;
        // padding-left: 40rpx;
        // padding-bottom: 15rpx;
    }
    .info-c{
        font-size: 28rpx;
        font-weight: bold;
        padding-left: 50rpx;
    }
    .border-t{
        border-top: 2rpx solid #E6E6E6;
    }
    .prompt {
    	font-size: 24rpx;
    	line-height: 26rpx;
    	color: #f62a2a;
    }
	.dangqian{
        font-size: 26rpx;
        font-weight: normal;
        color: #e2a53f;
        padding-left: 10rpx;
    }
    .price{
        font-size: 28rpx;
        font-weight: bold;
    }
    
	page {
		background-color: #f5f5f5;
	}

	.body {
		padding: 20rpx;
        font-size: 30rpx;
	}

	.pay {
		padding: 70rpx 0;
		text-align: center;

		text {
			font-weight: bold;
		}

		.num {
			font-size: 60rpx;
			// padding-right: 10rpx;
		}
	}

	.item {
		background-color: #FFFFFF;
		padding: 30rpx 30rpx 30rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;

		.right {
			.pay-icon {
				width: 38rpx;
				height: 38rpx;
                margin-right: 15rpx;
			}
		}

		.index-icon-30 {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.pay-02 {
		width: 710rpx;
		height: 202rpx;
		margin: 0 auto 65rpx;
	}

	.btn {
		margin-top: 60rpx;
		padding: 25rpx 270rpx;
        background-color: #f29700;
		// background-image: linear-gradient(to right, #fd9c4a, #f67c2c, #f05c0d);
		border-radius: 10rpx;
		color: #FFFFFF;
		text-align: center;
	}
	
	
	.item-left{
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	}
	.icon{
	    width: 44rpx;
	    height: 44rpx;
	    margin-right: 15rpx;
	}
	.arrow-right{
	    width: 16rpx;
	    height: 29rpx;
	    margin-left: 15rpx;
	}
	
	.price1{
	    font-size: 28rpx;
	}
	.price-num1{
	    font-size: 44rpx;
	}
	.inp{
	    width: 50vw;
	    text-align: right;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}
	.inp1{
	    color: #f93835;
	}
	
	.cart{
		position: fixed;
		right: 40rpx;
		bottom: 70rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 2rpx solid #f05c0d;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: #f05c0d;
	}
	.cart-img{
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
	}
    
    
    // 弹窗
    /deep/ .u-mode-center-box {
    	background-color: transparent !important;
    }
    .x1 {
    	width: 558rpx;
    	height: 122rpx;
    	background-color: transparent !important;
    }
    
    .popup-frame {
    	width: 558rpx;
    	height: 436rpx;
    	background-color: transparent !important;
    	position: relative;
    	padding: 160rpx 30rpx 40rpx;
        
        
        .z-bg {
        	display: block;
        	width: 558rpx;
        	height: 436rpx;
        	border-radius: 30rpx;
        	position: absolute;
        	top: 0;
        	left: 0;
        }
        
        .z-cat {
        	width: 522rpx;
        	height: 280rpx;
        	position: absolute;
        	top: -122rpx;
        	right: -12rpx;
        	z-index: 2;
        }
        
        .content {
        	width: 100%;
        	position: relative;
        	z-index: 99;
        }
        
        .content-tit {
        	font-size: 40rpx;
        	line-height: 42rpx;
        	text-align: center;
        	color: #8c2204;
        	font-weight: bold;
        	margin-bottom: 16rpx;
        }
        
        .content-ftit {
        	font-size: 34rpx;
        	line-height: 36rpx;
        	text-align: center;
        	color: #8c2204;
        	margin-bottom: 15rpx;
        }
        
        .btn1 {
        	width: 210rpx;
        	height: 80rpx;
        	font-size: 30rpx;
        	line-height: 80rpx;
        	text-align: center;
        	color: #fff;
        	border-radius: 40rpx;
        	background: linear-gradient(to right, #ff2a08, #ff9352);
        }
        
        .btn2 {
        	color: #ba5518;
        	background: linear-gradient(to right, #f9b600, #ffea98);
        	margin-left: 20rpx;
        }
    }
	
</style>
